<template>
  <!-- 系统标题 -->
  <!-- <titleheader></titleheader> -->
  <!-- 侧边栏和会员业务办理  -->
  <!-- <div style="display: flex; flex-direction: row;"> -->
    <!-- <div style="float: left;"> -->
      <!-- 引入侧边栏组件的使用 -->
      <!-- <slider> </slider> -->
    <!-- </div> -->

    <!-- 会员办理信息表单 -->
    <el-form ref="ruleFormRef" style="width: 800px; margin-top: 10%;padding-left: 22%;" :model="ruleForm" :rules="rules"
      label-width="auto">
      <img src="/src/img/face.png" alt="" style="padding-left: 45%; width: 150px; margin-bottom: 30px;">
       <el-form-item label="姓名" prop="memberName"> 
    <el-input v-model="ruleForm.memberName" />
  </el-form-item>
  
  <el-form-item label="性别" prop="memberSex"> 
    <el-radio-group v-model="ruleForm.memberSex">
      <el-radio value="true">男</el-radio>
      <el-radio value="false">女</el-radio>
    </el-radio-group>
  </el-form-item>
  
  <el-form-item label="电话号码" prop="phoneNum"> 
    <el-input v-model="ruleForm.phoneNum" />
  </el-form-item>
     <el-form-item label="健身卡" prop="card">
    <el-select v-model="ruleForm.card">
      <el-option 
        v-for="item in cardOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  
  <el-form-item label="会籍顾问" prop="huiji">
    <el-select v-model="ruleForm.huiji">
      <el-option 
        v-for="item in huijiOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
      <el-form-item style="padding-left: 45%;">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">
          清空
        </el-button>
      </el-form-item>
    </el-form>
  <!-- </div> -->


</template>


<style>
.form-fz {
  font-size: 20px;
}
</style>

<script lang="ts" setup>
// 导入 Vue 3 的响应式 API 和类型定义
import { onMounted, reactive, ref } from 'vue'
// 导入 Element Plus 的表单类型
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
// 使用 TypeScript 接口定义表单数据结构
interface RuleForm {
  memberName: string 
  memberSex: string  
  phoneNum: string   
  card: string       
  huiji: string      
}

const ruleForm = reactive<RuleForm>({
  memberName: '',    
  memberSex: '男',
  phoneNum: '',
  card: '',          
  huiji: ''          
})

// 更新表单规则
const rules = reactive<FormRules<RuleForm>>({
  memberName: [  // 字段名改为 memberName
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 4, message: '姓名格式有误', trigger: 'blur' },
  ],
  memberSex: [   // 字段名改为 memberSex
    { required: true, message: '请选择性别', trigger: 'blur' }
  ],
  phoneNum: [    // 字段名改为 phoneNum
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    { min: 11, max: 11, message: '号码格式错误', trigger: 'blur' },
  ],
  card: [
    { required: true, message: '请选择健身卡', trigger: 'blur' }
  ],
  huiji: [
    { required: true, message: '请选择会籍顾问', trigger: 'blur' }
  ],
})
// ruleFormRef用于引用表单实例FormInstance
const ruleFormRef = ref<FormInstance>()
// 定义表单数据的响应式数据对象ruleForm，存储表单输入值

/*  规则属性说明：
required--含义：是否必填--值：true/false
message--含义：验证失败时的错误提示文本--值：自定义字符串
trigger--含义：触发验证的时机--值：'blur'/'change'
min/max--含义：文本长度限制（或数字范围）--值：数字
type--含义：特殊类型验证（如日期、数组）--值：数据类型
 */
// 使用 Element Plus 的FormRules类型定义响应式的数据输入验证规则


// 为动态生成选项定义响应变量
const cardOptions = ref([])
const huijiOptions = ref([])
// 加载选项数据 请求后端
const loadOptions = async () => {
  try {
    // 请求后端 获取响应数据
    const cardsRes = await axios.get('/api/cards')
    const huijisRes = await axios.get('/api/huijis')
    
    // 处理健身卡选项
    cardOptions.value = cardsRes.data.map(card => ({
      label: card.cardName,  
      value: card.cardName   
    }));
    
    // 处理会籍顾问选项
    huijiOptions.value = huijisRes.data.map(huiji => ({
      label: huiji.eeName,  
      value: huiji.eeName    
    }));
    
  } catch (error) {
    console.error('加载选项失败:', error);
    ElMessage.error('加载选项失败，请稍后重试');
  }
}
// 挂载
onMounted(() => {
  loadOptions()
})

// 表单提交

 // 异步提交表单的方法函数
// formEl: formEl指代表单实例属性 FormInstance | undefined: 表单实例要么是FormInstance,要么是undefined
// const submitForm = async (formEl: FormInstance | undefined) => {
//   if (!formEl) return // 如果表单实例不存在，则直接返回，避免后续代码执行
//   await formEl.validate((valid, fields) => {  //调用 Element Plus 的 validate 方法进行表单验证 
 //  valid：布尔值，表示验证是否通过 fields：包含验证失败字段信息的对象
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
        // 创建符合后端要求的数据结构
        const memberData = {
          memberName: ruleForm.memberName,
          memberSex: ruleForm.memberSex,
          phoneNum: ruleForm.phoneNum,
          card: ruleForm.card,
          huiji: ruleForm.huiji
        }
        
        await axios.post('/api/members', memberData)
        console.log('办理成功!')
        ElMessage.success('办理成功!')
        formEl.resetFields()
      }
    
  })

}

// 重置表单函数
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // formEl.resetFields()：Element Plus 提供的表单重置方法
  formEl.resetFields()
}

// }))
</script>
